<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="创建板块">
        <template>
          <el-form ref="form1" :model="form1" label-width="80px">
            <el-form-item label="板块名">
              <el-input v-model="form1.tagname"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="submitform1">提交</el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-tab-pane>
      <el-tab-pane label="创建分类">
        <template>
          <el-form ref="form2" :model="form2" label-width="80px">
            <el-form-item label="板块">
              <el-select v-model="form2.tagid" placeholder="请选择">
                <el-option
                  v-for="item in tags"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              
            </el-form-item>
            <el-form-item label="分类名">
              <el-input v-model="form2.typename"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="submitform2">提交</el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-tab-pane>
      <el-tab-pane label="编辑/删除板块">
        <el-form ref="form3" :model="form3" label-width="80px">
          <el-form-item label="板块">
            <el-select v-model="form3.tagid" placeholder="请选择">
              <el-option
                v-for="item in tags"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="板块名">
            <el-input v-model="form3.tagname"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="delform3">删除</el-button>
            <el-button @click="submitform3">更改</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="编辑/删除分类">
        <el-form ref="form4" :model="form4" label-width="80px">
          <el-form-item label="分类">
            <el-cascader :options="tags" v-model="form4.typeselect"></el-cascader>
          </el-form-item>
          <el-form-item label="分类名">
            <el-input v-model="form4.typename"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="delform4">删除</el-button>
            <el-button @click="submitform4">更改</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import adminApi from "@/assets/api/admin.js";
import typeApi from "@/assets/api/type.js";

export default {
  data() {
    return {
      tags: [],
      form1: {
        tagname: null
      },
      form2: {
        typename: null,
        tagid: null
      },
      form3: {
        tagname: null,
        tagid: null
      },
      form4: {
        typename: null,
        typeselect: null
      }
    };
  },
  mounted() {
    this.load();
  },

  methods: {
    load() {
      typeApi.getType().then(res => {
        var list = res.data.tags;
        list.forEach(val => {
          var children = [];
          val.typeSends.forEach(val2 => {
            children.push({
              value: val2.typeId,
              label: val2.typeName
            });
          });
          this.tags.push({
            value: val.tagsId,
            label: val.tagsName,
            children: children
          });
        });
      });
    },
    submitform1() {
      adminApi.createTag(this.form1.tagname).then(res=>{
        if(res.data.success == 1){
         alert("创建成功")
       }
        
      })
    },
    submitform2() {
      
      adminApi.createType(this.form2.tagid,this.form2.typename).then(res=>{
        if(res.data.success == 1){
         alert("创建成功")
       }

      })
    },
    delform3() {
      adminApi.deleteTag(this.form3.tagid).then(res=>{
        if(res.data.success == 1){
         alert("删除成功")
       }

      })

    },
    submitform3() {
      adminApi.editTag(this.form3.tagid,this.form3.tagname).then(res=>{
        if(res.data.success == 1){
         alert("修改成功")
       }

      })
    },
    delform4() {
      adminApi.deleteType(this.form4.typename).then(res=>{
        if(res.data.success == 1){
         alert("删除成功")
       }

      })

    },
    submitform4() {
      let tagid = this.form4.typeselect[0];
      let typeid = this.form4.typeselect[1];
      let typename = this.form4.typename;
     
      adminApi.editType(tagid,typeid,typename).then(res=>{
       if(res.data.success == 1){
         alert("修改成功")
       }

      })
    }
  }
};
</script>

<style>
</style>
